<template>
    <div class="card-play-header-container">
        <v-row>
            <v-col v-for="step in steps" md="6" sm="12" lg="3">
                <div class="step-card" :class="{ highlight: cardGameStore.currentStep === step.key }">
                    <v-icon class="mr-2">mdi-{{ step.icon }}</v-icon>{{ step.title }}
                </div>
            </v-col>
        </v-row>
    </div>
</template>

<script setup lang="ts">
import { useCardGameStore } from '../../stores/card-game.store';
const cardGameStore = useCardGameStore()

const steps = [
    { title: 'Cards Initialized', key: 1, icon: 'cards' },
    { title: 'Cards Shuffled ', key: 2, icon: 'shuffle' },
    { title: 'Cards Dealed ', subtitle: '', key: 3, icon: 'send' },
    { title: 'Winner', subtitle: '', key: 4, icon: 'trophy' },
]

</script>

<style lang="scss" scoped>
.card-play-header-container {
    .step-card {
        font-size: 2rem;
        height: 12vh;
        width: 100%;
        background-color: #eeeeee;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .highlight {
        background-color: #1867c0;
        color: #fff
    }
}
</style>
